<template>
  <div :class="{
    'center-park': true,
    'center-park-dark': isDarkTheme,
    'center-park-light': !isDarkTheme,
  }">

    <CustomTitle 
      :pageConfig="pageConfig"
      :title="title">
      <div class="center-part-type-container">
        <!-- 类型: -->
        <div
          :class="{
            'center-part-type': true,
            'active': activeType === index
          }"
          v-for="(item, index) in robotList"
          @click="handleTypeClick(item, index)"
        >{{ item }}</div>
      </div>
    </CustomTitle>

    <div class="subtitle">
      <span class="titleText">{{ subTitle }}</span>
      <div style="display: flex; align-items: baseline;">
        <span>平均处理时长：</span>
        <span class="totalNum">{{ total }}</span>
        <span> 秒/单 </span>
        <div class="custom-select">
          <el-select
            v-model="type"
            clearable
            placeholder="请选择"
            style="width: 120px;"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="center-part-chart">
      <HorizontalBarchart
        :pageConfig="pageConfig"
        @handleOpenProcessing="handleOpenProcessing"
      />
    </div>

  </div>
</template>

<script>
import CustomTitle from '../components/CustomTitle.vue';
import HorizontalBarchart from './HorizontalBarchart.vue';

export default {
  props: {
    pageConfig: Object
  },
  components: {
    CustomTitle,
    HorizontalBarchart
  },
  data() {
    return {
      title: '处理时效',
      subTitle: '平均处理时长',
      total: "30",
      type: "",
      activeType: 1,
      robotList: ['初审', '制证'],
      typeList: [
        {
          value: '1',
          label: '本月'
        },
        {
          value: '2',
          label: '本季'
        },
        {
          value: '3',
          label: '本年'
        }
      ]

    }
  },

  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  methods: {
    handleTypeClick(item, index) {
      this.activeType = index;
    },
    handleOpenProcessing(name) {
     this.$emit('handleOpenProcessing', name)
    }
  },


}
</script>

<style lang="scss" scoped>
.center-park {
  height: 35%;
  .center-part-type-container {
    display: flex;
    justify-content: space-between;
  }
  .center-part-type {
    height: 25px;
    width: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    cursor: pointer;
  }
  .subtitle {
    color: #fff;
    height: 30px;
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 0 1vw 0 1.5vw;
    div {
      display: flex;
      align-items: center;
    }
    .titleText {
      font-size: 16px;
      font-family: "YouSheBiaoTiHei";
    }
    .totalNum {
      font-size: 18px;
    }
    .custom-select {
      margin-left: 8px;
      font-size: 12px;
      height: 27px;
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

  .center-park-dark {
    .center-part-type {
      height: 30px;
      width: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 2px;
      background: url('../css/btn-bg-dark.png') no-repeat;
      background-size: 100% 100%;
    }
    .center-part-type.active {
      background: url('../css/btn-bg-dark-active.png') no-repeat;
      background-size: 100% 100%;
    }
    .subtitle {
      background: url('../css/subTitle-bg-dark.png') no-repeat;
      background-size: 100% 100%;
      .textTitle {
        text-shadow: 0 0 8px #f5e74f80;
        letter-spacing: 0.8px;
        background: linear-gradient(180deg, #FFF 32.93%, #F5E74F 82.93%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .totalNum {
      font-size: 18px;
      font-weight: 500;
      text-shadow: 0 0 8px #f5e74f80;
      font-family: "TCloudNumber";
      letter-spacing: 0.8px;
      background: linear-gradient(180deg, #FFF 32.93%, #F5E74F 82.93%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .custom-select {
      background: url("../css/select-bg.png") no-repeat;
      background-size: 100% 100%;
    }
    /* 设置下拉框透明 */
    ::v-deep .el-input--small .el-input__inner {
      height: 30px;
      background: transparent;
      color: #fff;
      border: none;
      font-size: 12px;
      font-weight: 500;
       /* font-family: "Alibaba PuHuiTi 2.0"; */
    }

    /* // 下拉框箭头颜色 */
    // ::v-deep .el-icon-arrow-up:before {
    //   color: #4EEAFF;
    // }
    ::v-deep .el-icon-arrow-up:before {
      color: transparent;
      background: url("../css/arrow-dark.png") no-repeat;
      background-size: 14px 10px;
    }
    // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头)
    ::v-deep.el-popper .popper__arrow,
    ::v-deep.el-popper .popper__arrow::after {
      display: none;
    }
    // 设置下拉框的背景颜色及边框属性；
    ::v-deep .el-select-dropdown {
      // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
      // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示；
      background-color: transparent !important;
      color: #fff;
      border: 1px solid rgba(15, 120, 255, 0.24);
    }
    // 设置下拉框的字体属性及背景颜色；
    .el-select-dropdown__item {
      color: #fff;
      background-color: transparent;
    }
    // 设置下拉框列表的 padding 值为：0；(即：样式调整)
    ::v-deep.el-select-dropdown__list {
      padding: 0;
    }
    // 设置输入框与下拉框的距离为：0; (即：样式调整)
    ::v-deep.el-popper[x-placement^="bottom"] {
      margin-top: 0px;
      background: transparent;
    }
    
    // 设置鼠标悬停在下拉框列表的悬停色；
    .el-select-dropdown__item:hover {
      color: #fff;
      background-color: rgba(15, 120, 255, 0.24);
    }
    .el-select-dropdown__item.selected {
      color: #fff;
      background-color: rgba(15, 120, 255, 0.24);
    }
   
  }

// 2K
@media screen and (max-width: 2560px) {
   .center-park {
    .center-part-type {
      font-size: 18px;
      height: 30px;
      width: 80px;
    }
    .subtitle {
      height: 40px;
      font-size: 18px;
      .titleText {
        font-size: 20px;
      }
      .totalNum {
        font-size: 36px;
      }
      .custom-select {
        font-size: 14px;
        height: 30px;
        width: 120px;
      }
      ::v-deep .el-input--small .el-input__inner {
        height: 30px;
        font-size: 14px;
      }
    }
    .center-part-chart {
      height: calc(100% - 95px);
    }
  }
}
// 全高清屏幕
@media screen and (max-width: 1920px) {
  .center-park {
    .center-part-type {
      font-size: 14px;
      height: 25px;
      width: 50px;
    }
    .subtitle {
      height: 30px;
      font-size: 12px;
      .titleText {
        font-size: 16px;
      }
      .totalNum {
        font-size: 18px;
      }
      .custom-select {
        font-size: 12px;
        height: 27px;
        width: 100px;
      }
      ::v-deep .el-input--small .el-input__inner {
        height: 30px;
        font-size: 12px;
      }
    }
    .center-part-chart {
      height: calc(100% - 65px);
    }
  }
}
</style>